<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onblur</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>

    <script type="text/javascript">
        window.onload = function (){
            var showEle = document.getElementById("show");
            //1:查找#bj节点
            document.getElementById("btn01").onclick = function (){
                var elementById = document.getElementById("bj").innerHTML;
                showEle.innerText = elementById;
            }
            //2.查找所有的li节点
            document.getElementById("btn02").onclick = function (){
                var lis = document.getElementsByTagName("li");
                var li_str = "";
                for(var i = 0 ; i < lis.length; i++){
                    li_str += lis[i].innerText + " ";
                }
                showEle.innerText = li_str;
            }
            //3.查找name=gender的所有节点
            document.getElementById("btn03").onclick = function (){
                var geners = document.getElementsByName("gender");
                var li_str = "";
                for(var i = 0 ; i < geners.length; i++){
                    li_str += geners[i].value + " ";
                }
                showEle.innerText = li_str;
            }
            //4.查找#city下所有的li节点
            document.getElementById("btn04").onclick = function (){
                var lis = document.getElementById("city").getElementsByTagName("li");
                var li_str = "";
                for(var i = 0 ; i < lis.length; i++){
                    li_str += lis[i].innerText + " ";
                }
                showEle.innerText = li_str;
            }
            //5.查找#city下面的所有子节点
            document.getElementById("btn05").onclick = function (){
                var lis = document.getElementById("city").childNodes;
                var li_str = "";
                for(var i = 0 ; i < lis.length; i++){
                    if(lis[i].innerText == undefined){
                        lis[i].innerText = '空';
                    }
                    li_str += lis[i].innerText + " ";
                }
                showEle.innerText = li_str;
            }
            //6.查找#phone的第一个子节点
            document.getElementById("btn06").onclick = function (){
                var firstNode = document.getElementById("phone").firstChild.innerText;
                showEle.innerText = firstNode;
            }
            //7.查找#bj的父节点
            document.getElementById("btn07").onclick = function (){
                var parentNode = document.getElementById("bj").parentNode;
                showEle.innerText = parentNode.innerHTML;
            }
            //8.查找#android的前一个兄弟节点
            document.getElementById("btn08").onclick = function (){
                var preSibling = document.getElementById("android").previousSibling.innerText;
                showEle.innerText = preSibling;
            }
            //9.返回#username的value属性值
            document.getElementById("btn09").onclick = function (){
               var usernameValue = document.getElementById("username").value;
                showEle.innerText = usernameValue;
            }
            //10.设置#username的value属性值
            document.getElementById("btn10").onclick = function (){
                document.getElementById("username").value = "国服樊振东";
            }
            //11.返回#bj的文本值
            document.getElementById("btn11").onclick = function (){
               let res = document.getElementById("bj").innerHTML;
               res = document.getElementById("bj").innerText;
                showEle.innerHTML = res;
            }
        }
    </script>

    <style type="text/css">
        h1{
            margin: auto;
            text-align: center;
            margin-bottom: 50px;
        }
        #total{
            width: 80%;
            min-height: 550px;
            background-color: #7bed9f;
            margin: auto;
            font-size: 16px;
            color: #ffffff;
        }
        #inner_total{
            width: 50%;
            float: left;
        }
        #total .inner{
            border: 1px solid #333333;
            margin: 15px;
            background-color: #74b9ff;
            padding: 5px;
        }
        .inner_one{
            height: 400px;
        }
        #total .inner p{
            font-size: 25px;
            color: #5352ed;
        }
        #total .inner ul{
            list-style: none;
        }
        #total .inner ul li{
            padding: 10px 10px;
            background-color: #009f95;
            float: left;
            margin-left: 15px;
        }
        #btnList{
            float: right;
            background-color: #2E2D3C;
            width: 40%;
            height: 535px;
            margin: 15px;
            color: #ffffff;
        }
        #btnList div{
            min-width: 150px;
            height: 45px;
            margin: 3px;
        }
        #btnList div button{
            padding: 6px 10px;
            cursor: pointer;
        }

        #show{
            width: 80%;
            min-height: 50px;
            margin:auto;
            font-size: 20px;
            margin-top: 20px;
            background: #009f95;
            line-height: 50px;
            color: #ffffff;
            text-indent: 5px;
        }
    </style>


</head>
<body>
<p id="text_show">

</p>
<div class="look_source_code" onclick="getPageContent()">查看源码</div>
<h1>DOM节点练习</h1>
<div id="total">
    <div id="inner_total">
        <div class="inner inner_one">
            <p>你喜欢哪个城市?</p>
            <ul id="city">
                <li id="bj">北京</li>
                <li>上海</li>
                <li>东京</li>
                <li>首尔</li>
            </ul>
            <br/>
            <br/>
            <p>
                你喜欢哪款单机游戏?
            </p>
            <ul id="game">
                <li id="r1">红警</li>
                <li>实况</li>
                <li>极品飞车</li>
                <li>魔兽</li>
            </ul>
            <br/>
            <br/>
            <p>
                你手机的操作系统是?
            </p>
            <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
        </div>

        <div class="inner">
            gender:
            <input type="radio" name="gender" value="male" />
            Male
            <input type="radio" name="gender" value="female" />
            Female
            <br/>
            <br/>
            name:
            <input type="text" name="name" id="username" value="abcde">
        </div>
    </div>



    <div id="btnList">
        <div><button id="btn01">查找#bj节点</button></div>
        <div><button id="btn02">查找所有的li节点</button></div>
        <div><button id="btn03">查找name=gender的所有节点</button></div>
        <div><button id="btn04">查找#city下所有的li节点</button></div>
        <div><button id="btn05">查找#city下面的所有子节点</button></div>
        <div><button id="btn06">查找#phone的第一个子节点</button></div>
        <div><button id="btn07">查找#bj的父节点</button></div>
        <div><button id="btn08">查找#android的前一个兄弟节点</button></div>
        <div><button id="btn09">返回#username的value属性值</button></div>
        <div><button id="btn10">设置#username的value属性值</button></div>
        <div><button id="btn11">返回#bj的文本值</button></div>
    </div>


</div>

<div id="show">

</div>



</body>


</html>


